import 'package:flutter/material.dart';
import 'package:flutterDemo/pages/hot_key/hot_key_vm.dart';
import 'package:flutterDemo/pages/web_view_page.dart';
import 'package:flutterDemo/repository/datas/common_website_data.dart';
import 'package:flutterDemo/repository/datas/search_hot_key_data.dart';
import 'package:flutterDemo/route/RouteUtils.dart';
import 'package:provider/provider.dart';

class HotKeyPage extends StatefulWidget {
  const HotKeyPage({super.key});

  @override
  State createState() {
    return _HotKeyPageState();
  }
}

class _HotKeyPageState extends State<HotKeyPage> {
  HotKeyViewModel viewModel = HotKeyViewModel(); //创建viewModel

  @override
  void initState() {
    super.initState();
    viewModel.initData();
  }

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
        create: (context) {
          return viewModel;
        },
        child: Scaffold(
            body: SafeArea(
                child: SingleChildScrollView(
          child: Column(children: [
            // 标题
            Container(
              height: 45,
              decoration: const BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(10)),
                  border: Border(
                      top: BorderSide(width: 0.5, color: Colors.grey),
                      bottom: BorderSide(width: 0.5, color: Colors.grey),
                      left: BorderSide(width: 0.5, color: Colors.grey),
                      right: BorderSide(width: 0.5, color: Colors.grey))),
              padding: const EdgeInsets.only(
                left: 20,
                right: 20,
              ),
              margin: const EdgeInsets.only(top: 15, left: 10, right: 10),
              child: Row(children: [
                const Text('搜索热词',
                    style: TextStyle(fontSize: 14, color: Colors.black)),
                const Expanded(child: SizedBox()),
                Image.asset(
                  "assets/images/icon_search.png",
                  width: 30,
                  height: 30,
                ),
              ]),
            ),

            ///搜索热词
            Consumer<HotKeyViewModel>(builder: (context, vm, child) {
              return _gridView(false, keyList: vm.keyList, itemTap: (value) {
                //跳转到webview页面
                // RouteUtils.push(context, WebViewPage(title: "搜索热词", url: value));
              });
            }),

            /// 常用网站标题
            Container(
              height: 45,
              alignment: Alignment.centerLeft,
              decoration: const BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(10)),
                  border: Border(
                      top: BorderSide(width: 0.5, color: Colors.grey),
                      bottom: BorderSide(width: 0.5, color: Colors.grey),
                      left: BorderSide(width: 0.5, color: Colors.grey),
                      right: BorderSide(width: 0.5, color: Colors.grey))),
              padding: const EdgeInsets.only(
                left: 20,
                right: 20,
              ),
              margin: const EdgeInsets.only(top: 15, left: 10, right: 10),
              child: const Text('常用网站',
                  style: TextStyle(fontSize: 14, color: Colors.black)),
            ),

            /// 常用网站列表
            Consumer<HotKeyViewModel>(builder: (context, vm, child) {
              return _gridView(true, websiteList: vm.websiteList,
                  itemTap: (value) {
                //跳转到webview页面
                RouteUtils.push(
                    context, WebViewPage(title: "常用网站", url: value));
              });
            }),
          ]),
        ))));
  }

  Widget _gridView(bool? isWebsite,
      {List<CommonWebsiteData>? websiteList,
      List<SearchHotKeyData>? keyList,
      ValueChanged<String>? itemTap}) {
    return Padding(
        padding: const EdgeInsets.all(20),
        child: GridView.builder(
          //禁止滑动
          physics: const NeverScrollableScrollPhysics(),
          shrinkWrap: true,
          gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
            mainAxisSpacing: 10, // 子项之间的垂直间距
            maxCrossAxisExtent: 120, //  每个子项的最大宽度
            childAspectRatio: 2.5, // 子项的宽高比
            crossAxisSpacing: 10,
          ),
          itemBuilder: (context, index) {
            if (isWebsite == true) {
              return _item(
                name: websiteList?[index].name ?? "",
                itemTap: itemTap,
                link: websiteList?[index].link ?? "",
              );
            } else {
              return _item(
                name: keyList?[index].name ?? "",
                itemTap: itemTap,
              );
            }
          },
          itemCount: isWebsite == true
              ? websiteList?.length ?? 0
              : keyList?.length ?? 0,
        ));
  }

  Widget _item({String? name, ValueChanged<String>? itemTap, String? link}) {
    return GestureDetector(
        onTap: () {
          if (link != null) {
            itemTap?.call(link);
          } else {
            itemTap?.call(name ?? "");
          }
        },
        child: Container(
            alignment: Alignment.center,
            decoration: BoxDecoration(
                border: Border.all(color: Colors.grey, width: 0.5),
                borderRadius: const BorderRadius.all(Radius.circular(10))),
            child: Text(name ?? "")));
  }
}
